<!--
 * @Author: all
 * @Date: 2019-11-19 09:05:30
 * @LastEditTime: 2019-11-23 09:39:41
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \YouYouFo\you-you-go\src\App.vue
 -->

<template>
  <div id="app">
    <!-- 头部导航栏 -->
    <van-nav-bar
      title="游游购"
      :fixed="true"
      :left-text="isBack?'返回':''"
      :left-arrow="isBack"
      :right-text="$route.path!=='/search'?'':'添加'"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    ></van-nav-bar>
    <!--内容区域-->
    <router-view class="contentBox" />
    <!-- 底部导航栏 -->
    <van-tabbar route :fixed="true" active-color="yellowgreen" :z-index="1">
      <!-- 首页 -->
      <van-tabbar-item to="/index" class="iconfont icon-shouye">首页</van-tabbar-item>
      <!-- 会员 -->
      <van-tabbar-item to="/members" class="iconfont icon-wode">会员</van-tabbar-item>
      <!-- 购物车 -->
      <van-tabbar-item
        to="/shoppingCart"
        class="iconfont icon-gouwu"
        :info="$store.getters.getAllCount"
      >购物车</van-tabbar-item>
      <!-- 搜索 -->
      <van-tabbar-item to="/search" class="iconfont icon-chazhao">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// import { mapState } from 'vuex'
export default {
  data() {
    return {
      isBack: true
    }
  },
  created() {
    this.$route.path === '/index' ? (this.isBack = false) : (this.isBack = true)
  },
  mounted() {},
  watch: {
    /* 通过监听路由来设置返回按钮状态,刷新页面时,路由地址没有改变,所以需要在create中先设置 */
    '$route.path'(newVal, oldVal) {
      newVal !== '/index' ? (this.isBack = true) : (this.isBack = false)
    }
  },
  computed: {},
  methods: {
    // 返回上一个页面
    onClickLeft() {
      this.$router.back(-1)
    },
    // 点击右箭头,添加商品
    onClickRight() {
      this.$router.push('/addGoods')
    }
  }
}
</script>
<style lang="less" scoped>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  .van-nav-bar {
    height: 40px;
    line-height: 40px;
    background-color: #1989fa;
    .van-icon-arrow-left,
    .van-nav-bar__text,
    .van-nav-bar__title {
      color: #fff;
      font-size: 14px;
    }
    /deep/.van-nav-bar__text {
      background-color: #1989fa;
    }
  }
  /deep/.van-tabbar-item__text {
    font-size: 12px;
  }
  /deep/.van-info {
    font-size: 5px;
    margin-top: -15px;
    margin-right: -8px;
  }
  .contentBox {
    margin-top: 40px;
    margin-bottom: 50px;
  }
}
</style>

